<template>
  <div class="wrapper">
    <div>
      <div>
        <span>测试工具</span>
        <Button @click="sendCommand">发送指令</Button>
      </div>
      <Textarea
        class="w-300"
        style="height: 300px"
        v-model:value="commandString"
        :rows="10"
      ></Textarea>
    </div>
    <canvas class="viewport" width="1920" height="1080"></canvas>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue"
import { Toast, Textarea, Button, Message } from "cax-ui"
import { Socket, io } from "socket.io-client"
import { IO, throttle } from "stl-typescript"
import { v4 as uuid } from "uuid"

let start = 0
let end = 0
let socket: Socket
const commandString = ref("")
onMounted(() => {
  const canvas = document.getElementsByClassName("viewport")[0] as any
  const ctx = canvas.getContext("2d")
  const img = new Image()
  img.onload = () => {
    ctx.drawImage(img, 0, 0, 1920, 1080)
  }
  socket = io("http://localhost:3000")
  socket.on("connect", () => {
    console.log("连接成功")
    socket.emit("join", "engine_client")
    setTimeout(() => {
      socket.emit("UpdateView", 1)
    }, 200)
  })
  socket.on("disconnect", () => {
    console.log("断开连接")
  })
  socket.on("viewport", (buffer) => {
    const blob = new Blob([buffer], { type: "image/jpeg" })
    img.src = URL.createObjectURL(blob)
  })
  socket.on("test", (buffer) => {
    console.log("收到")
  })

  const scale = 2

  canvas.addEventListener("contextmenu", (ev: MouseEvent) => {
    ev.preventDefault()
  })

  canvas.addEventListener("mousedown", (ev: any) => {
    ev.preventDefault()
    ev.stopPropagation()
    const isRight = ev.button === 2
    if (start === 0) {
      start = performance.now()
      console.log("开始时间", start)
    }
    if (isRight) {
      socket.emit("RightButtonPress", {
        x: ev.offsetX * scale,
        y: ev.offsetY * scale,
      })
    } else {
      socket.emit("LeftButtonPress", {
        x: ev.offsetX * scale,
        y: ev.offsetY * scale,
        ctrl: ev.ctrlKey ? "1" : "0",
        shift: ev.shiftKey ? "1" : "0",
      })
    }
  })

  canvas.addEventListener("mouseup", (ev: any) => {
    const isRight = ev.button === 2
    if (isRight) {
      socket.emit("RightButtonRelease", {
        x: ev.offsetX * scale,
        y: ev.offsetY * scale,
      })
    } else {
      socket.emit("LeftButtonRelease", {
        x: ev.offsetX * scale,
        y: ev.offsetY * scale,
      })
    }
  })

  canvas.addEventListener("wheel", (ev: any) => {
    ev.preventDefault()
    ev.stopPropagation()
    socket.emit("MouseWheel", {
      x: ev.offsetX * scale,
      y: ev.offsetY * scale,
      dx: ev.deltaX * scale,
      dy: ev.deltaY * scale,
    })
  })

  const c = throttle((ev: any) => {
    socket.emit("MouseMove", {
      x: ev.offsetX * scale,
      y: ev.offsetY * scale,
      ctrl: ev.ctrlKey ? "1" : "0",
      shift: ev.shiftKey ? "1" : "0",
    })
  }, 20)

  canvas.addEventListener("mousemove", (ev: any) => {
    c(ev)
  })
})

function sendCommand() {
  if (socket) {
    try {
      const command = JSON.parse(commandString.value)
      command.Tag = uuid()
      socket.emit("Command", command)
    } catch (error) {
      Message.error("命令格式错误")
    }
  }
}
</script>
<style lang="less" scoped>
.wrapper {
  width: 100%;
  height: 100%;
  background-color: white;
  margin: 0;
  padding: 0;
  display: flex;
}

.viewport {
  width: 810px;
  height: 540px;
}
</style>
